<template>
  <section>
    <el-dialog
      :visible.sync="pojectDetailVisible"
      :show-close="false"
      :fullscreen="true"
      :append-to-body="true"
      custom-class="dialog-style">
      <div slot="title" class="header-title">
        <i class="el-icon-back" @click="closeProjectDetail"></i>
        <span>{{projectInfo.taskName}}</span>
        <div style="float: right;">
          <!-- <i class='el-icon-picture-outline' style="margin-right: 10px;" @click="toggle"></i> -->
          <i class="el-icon-setting" @click="updateProject(projectInfo.id)"></i>
        </div>
        <el-button-group style="position: absolute; right: 60px; top: 10px">
          <el-button :type="!showPicture ? 'primary' : 'default'" @click="toggle(false)">甘特图</el-button>
          <el-button :type="showPicture ? 'primary' : 'default'" @click="toggle(true)">流程图</el-button>
        </el-button-group>
      </div>
      <TaskDetail ref="TaskDetail" :taskDetailVisible.sync="taskDetailVisible" @closeSelf="taskDetailVisible=false;" @refresh="refreshProject"></TaskDetail>
      <AddOrUpdateTask ref="AddOrUpdateTask" :visible.sync="visible" @refresh="refreshProject"></AddOrUpdateTask>
      <add-or-update-project ref="AddOrUpdateProject" v-if="addOrUpdateVisible" @refresh="refreshProject"></add-or-update-project>
      <div v-if="showPicture" class="main" :style="{ 'height': documentClientHeight + 'px' }">
        <relationGraph ref="relationGraph" @openTaskDetail="openTaskDetail" @addSubTask="addSubTask" :taskList.sync="taskList" />
      </div>
      <div v-if="!showPicture" class="main" :style="{ 'height': documentClientHeight + 'px' }">
        <div class="left-bar">
          <div class="create-btn">
            <div @click="addTask" :class="{'forbid': !canCreatTask}"><i class="el-icon-plus" style="margin-right: 5px;font-weight: bold;"></i>创建任务</div>
          </div>
          <div class="menu-list">
            <div v-for="item in menuList"
              :key="item.index"
              @click="selectMenu(item)"
              :class="{'active': currentIndex === item.index}"
              class="menu-item">
              <i class="menu-icon" :class="item.icon"></i>
              {{item.name}}
            </div>
          </div>
        </div>
        <div class="content-wrapper">
          <div v-show="currentIndex === 1" class="content first-content">
            <div class="task-detail" :class="'status-bg-color2'" v-for="item in menuList[0].subMenuList" :key="item.status">
              <div class="top" :class="'status-bg-color2'">
                <div class="title">{{item.name}}
                  <span v-if="item.status === '1'">（{{statisticsInfo.undoneAmount}}）</span>
                  <span v-if="item.status === '2'">（{{statisticsInfo.uncomfirmAmount}}）</span>
                  <span v-if="item.status === '3'">（{{statisticsInfo.completeAmount}}）</span>
                  <span v-if="item.status === '9'">（{{statisticsInfo.terminatedAmount}}）</span>
                </div>
              </div>
              <div class="task-content">
                <div v-for="(value, idx) in taskList" :key="value.id">
                  <div v-if="(value.taskStatus === item.status && value.taskStatus !== '1') || (item.status === '1' && value.taskStatus === '1' && value.taskDatatype === '2')">
                    <div class="task-item" :class="{'sub-task-item' : value.taskDatatype === '3'}" @click="openTaskDetail(value.id)">
                      <div class="top">
                        <div class="logo">
                          <img :src="value.taskUrl? 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/task/'+value.taskUrl : 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/task/icon%20blue-1.png'"  style="width: 48px; height: 48px;border-radius: 5px;">
                        </div>
                        <div class="task-info">
                          <p class="taskName">{{value.taskName}}</p>
                          <p class="project">
                            <span>{{value.taskBelongName}}</span>
                          </p>
                        </div>
                      </div>
                      <div class="bottom">
                        <p>
                          <i class="el-icon-user">&nbsp;&nbsp;{{value.taskPrincipalName}}</i>
                        </p>
                        <p>
                          <i class="el-icon-bell"></i>
                          <span v-if="value.taskStatus !== '1'">{{value.taskRealEndtime}}</span>
                          <span v-if="value.analyzeData > 0">
                            <span v-if="value.taskStatus === '1'" class="overdue-color">（剩余{{value.analyzeData}}天）</span>
                            <span v-else :class="'early-color'">（提前{{value.analyzeData}}天）</span>
                          </span>
                          <span v-if="value.analyzeData < 0" :class="'overdue-color'">（逾期{{-value.analyzeData}}天）</span>
                        </p>
                        <i class="el-icon-arrow-down" v-if="value.subTaskInfo && item.status === '1' && value.taskDatatype === '2' && value.subTaskInfo.length > 0 && !value.showCurSubTask" @click.stop="showSubTask(idx)" style="color: #4495FF; font-size: 18px; font-weight: bold; position: absolute; right: 10px; bottom: 10px;"></i>
                        <i class="el-icon-arrow-up" v-if="value.subTaskInfo && item.status === '1' && value.taskDatatype === '2' && value.subTaskInfo.length > 0 && value.showCurSubTask" @click.stop="showSubTask(idx)" style="color: #4495FF; font-size: 18px; font-weight: bold; position: absolute; right: 10px; bottom: 10px;"></i>
                        <p class="task-status" :class="'early-bg-color'" v-if="value.taskStatus === '3' && value.analyzeData > 0 ">提前完成</p>
                        <p class="task-status" :class="'ontime-bg-color'" v-if="value.taskStatus === '3' && value.analyzeData === 0">按时完成</p>
                        <p class="task-status" :class="'overdue-bg-color'" v-if="value.taskStatus === '3' && value.analyzeData < 0">逾期完成</p>
                      </div>
                    </div>
                    <div v-if="value.showCurSubTask">
                      <div class="task-item sub-task-item" style="width: 90%;" v-for="(subtask, index) in value.subTaskInfo" :key="(value.id, index)" @click="openTaskDetail(subtask.id)">
                        <div class="top">
                          <div class="logo">
                            <img :src="subtask.taskUrl? 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/task/'+subtask.taskUrl : 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/task/icon%20blue-1.png'"  style="width: 48px; height: 48px;border-radius: 5px;">
                          </div>
                          <div class="task-info">
                            <p class="taskName">{{subtask.taskName}}</p>
                            <p class="project">
                              <span>{{subtask.taskBelongName}}</span>
                            </p>
                          </div>
                        </div>
                        <div class="bottom">
                          <p><i class="el-icon-user">&nbsp;&nbsp;{{subtask.taskPrincipalName}}</i></p>
                          <p>
                            <i class="el-icon-bell"></i>
                            <span v-if="subtask.taskStatus !== '1'">{{subtask.taskRealEndtime}}</span>
                            <span v-if="subtask.analyzeData > 0">
                              <span v-if="subtask.taskStatus === '1'" class="overdue-color">（剩余{{subtask.analyzeData}}天）</span>
                              <span v-else :class="'early-color'">（提前{{subtask.analyzeData}}天）</span>
                            </span>
                            <span v-if="subtask.analyzeData < 0" :class="'overdue-color'">（逾期{{-subtask.analyzeData}}天）</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-show="currentIndex === 2" class="content">
            <el-table class="table-file" style="width: 100%; margin-top: 20px;" border :data="tableData">
              <el-table-column label="文件名">
                <template slot-scope="scope">
                  <div class="table-file-name" @click="downloadFile(scope.row.attachment.url, scope.row.attachment.name)"><img :src="getPic(scope.row.attachment.name)" alt=""><span>{{scope.row.attachment.name}}</span></div>
                </template>
              </el-table-column>
              <el-table-column label="上传人" width="120" prop="attachment.uploader"></el-table-column>
              <el-table-column label="最后更新时间" width="150" prop="attachment.time"></el-table-column>
              <el-table-column label="大小" width="120" prop="attachment.size">
                <template slot-scope="scope">
                  <span v-if="scope.row.attachment.size < 1024*1024">{{(scope.row.attachment.size/1024).toFixed(2)}}KB</span>
                  <span v-else>{{(scope.row.attachment.size/1024/1024).toFixed(2)}}MB</span>
                </template>
              </el-table-column>
              <el-table-column label="打开任务详情" width="120" align="center">
                <template slot-scope="scope">
                  <i class="el-icon-document edit" @click="openTaskDetail(scope.row.id)"></i>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-show="currentIndex === 3" class="content third-content">
            <div class="project-data">
              <div class="nav">
                <div class="nav-item">
                  <div class="top">{{statisticsInfo.totalAmount}}</div>
                  <div>全部任务</div>
                </div>
                <div class="line"></div>
                <div class="nav-item">
                  <div class="top status-color1">{{statisticsInfo.undoneAmount}}</div>
                  <div>待完成</div>
                </div>
                <div class="nav-item">
                  <div class="top status-color2">{{statisticsInfo.uncomfirmAmount}}</div>
                  <div>待确认</div>
                </div>
                <div class="nav-item">
                  <div class="top status-color3">{{statisticsInfo.completeAmount}}</div>
                  <div>已完成</div>
                </div>
                <div class="line unimportance-info"></div>
                <div class="nav-item unimportance-info">
                  <div class="top overdue-color">{{statisticsInfo.overdueAmount}}</div>
                  <div>已逾期</div>
                </div>
                <div class="nav-item unimportance-info">
                  <div class="top">{{statisticsInfo.overduePercent.toFixed(2)}}%</div>
                  <div>逾期率</div>
                </div>
                <div class="line unimportance-info"></div>
                <div class="nav-item unimportance-info">
                  <div class="top">{{people}}</div>
                  <div>参与人数</div>
                </div>
                <div class="nav-item">
                  <img :src="projectInfo.principalAvatar" />
                </div>
                <div class="nav-item">
                  <div class="top" style="font-weight: normal;">{{projectInfo.taskPrincipalName}}</div>
                  <div>负责人</div>
                </div>
              </div>
              <div class="project-data-content">
                <div class="left">
                  <div class="title">统计数据</div>
                  <div class="statistics-charts">
                    <div id="chart1" style="width:500px;height:500px"></div>
                  </div>
                </div>
                <div class="right" style="height: 100%;">
                  <div class="project-data-wrapper" style="height: 100%;">
                    <div class="title">项目动态</div>
                    <div class="project-content" style="height: 100%;overflow-y: auto;" v-infinite-scroll="loadTrends" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
                      <div class="date-wrapper" v-for="dateSection in dateCollect" :key="dateSection">
                        <div class="project-wrapper">
                          <div v-for="(projectName, projectIndex) in trendDataCollect[dateSection].projectNames" :key="projectName" class="project">
                            <div class="project-header"><i class="el-icon-coin" style="position: absolute;left: 14px;top: 9px;"></i>{{dateSection}}</div>
                            <div class="project-trend-wrapper">
                              <div class="project-trend" v-for="trend in trendDataCollect[dateSection][trendDataCollect[dateSection].projectIds[projectIndex]]" :key="trend.id">
                                <div class="time">{{trend.dynamicCreateTime.substr(11, 5)}}</div>
                                <div class="avatar"><img :src="trend.executorAvatar" alt=""></div>
                                <div class="trend-detail">
                                  <p class="row-1">{{trend.dynamicExecutiveName}} <span>{{trend.dynamicPerformOperation}}</span></p>
                                  <span class="row-2">{{trend.dynamicTaskName}}</span>
                                  <p class="row-3">{{trend.dynamicContent}}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </section>
  
</template>

<script>
import dingMixin from "@/mixins/ding";
import echarts from 'echarts'
import formUtil from "@/utils/formUtil";
// import TaskDetail from './task-detail'
import AddOrUpdateTask from './add-or-update-task'
import AddOrUpdateProject from './add-or-update-project'
import relationGraph from './relation-graph'

export default {
  name: 'ProjectDetail',
  data() {
    return {
      documentClientHeight: "",
      visible: false,   // 创建任务页是否可见
      pojectDetailVisible: false,
      taskDetailVisible: false,
      addOrUpdateVisible: false,
      currentIndex: 1,
      menuList: [
        {
          index: 1,
          icon: "el-icon-document",
          name: "任务",
          subMenuList: [{
            status: '1',
            name: '待完成'
          },{
            status: '2',
            name: '待确认'
          },{
            status: '3',
            name: '已完成'
          },{
            status: '9',
            name: '已终止'
          }],
        },
        {
          index: 2,
          icon: "el-icon-folder-opened",
          name: "文件"
        },
        {
          index: 3,
          icon: "el-icon-search",
          name: "概况"
        }
      ],
      projectInfo: {},
      taskList: [],
      curFileIndex: 1,
      tableData: [],
      totalTableCount: 1,
      statisticsInfo: {
        totalAmount: 0,
        undoneAmount: 0,
        uncomfirmAmount: 0,
        completeAmount: 0,
        overdueAmount: 0,
        overduePercent: 0,
        aheadcompleteAmount: 0,
        ontimecompleteAmount: 0,
        overduecompleteAmount: 0,
        terminatedAmount: 0
      },
      people: 0,
      dateCollect: [],
      trendDataCollect: {},
      isFirstLoading: true,
      loading: false,
      page: 1,
      totalPage: 1,
      chartPie: null,
      showPicture: false
    };
  },
  computed: {
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    },
    noMore () {
      return this.page >= this.totalPage;
    },
    canCreatTask() {
      return this.projectInfo.taskDeleteStatus === '0' && this.projectInfo.hasTaskCreateAuthority === '1' && this.projectInfo.taskStatus === '1'
    }
  },
  components: {
    TaskDetail: () => import('./task-detail.vue'), AddOrUpdateTask, AddOrUpdateProject, relationGraph
  },
  mixins: [dingMixin],
  methods: {
    selectMenu(item) {
      this.currentIndex = item.index;
      if(this.currentIndex === 2) {
        this.getTableData();
      } else if (this.currentIndex === 3) {
        this.searchData(true);
        this.initCharts(this.statisticsInfo);
      }
    },
    addSubTask(data) {
      this.$nextTick(() => {
        this.$refs.AddOrUpdateTask.init(data);
      })
    },
    addTask() {
      if(!this.canCreatTask) return
      this.visible = true;
      let data = {id: this.projectInfo.id, taskName: this.projectInfo.taskName, taskDatatype: 2};
      this.$nextTick(() => {
        this.$refs.AddOrUpdateTask.init(data);
      })
    },
    init(id) {
      if(!this.pojectDetailVisible) this.showPicture = false;
      this.pojectDetailVisible = true;
      this.taskDetailVisible = false;
      this.addOrUpdateVisible = false;
      this.visible = false;
      this.currentIndex = 1;
      this.getProjectInfo(id);
    },
    refreshProject() {
      this.init(this.projectInfo.id);
      this.$emit("refresh");
    },
    closeProjectDetail () {
      this.pojectDetailVisible = false;
    },
    async getProjectInfo(id) {
      await this.$httpN.postB("division/task/projectInfo", { id: id }).then(res => {
        this.projectInfo = res;
        this.getTaskList(id);
        this.curFileIndex = 1;
      });
    },
    async getTaskList(id) {
      await this.$httpN.postB("division/task/getSubTaskList", { id: id }).then(res => {
        this.taskList = res;
        this.getStatistics(this.projectInfo.taskBelongId, this.projectInfo.id);
        this.analyzeData(this.taskList);
      })
    },
    async getStatistics(plateId, projectId) {
      this.statisticsInfo = {
        totalAmount: 0,
        undoneAmount: 0,
        uncomfirmAmount: 0,
        completeAmount: 0,
        overdueAmount: 0,
        overduePercent: 0,
        aheadcompleteAmount: 0,
        ontimecompleteAmount: 0,
        overduecompleteAmount: 0,
        terminatedAmount: 0
      },
      await this.$httpN.postB('division/statistics/statisticsByCustomize', {plateIds: plateId, projectIds: projectId}).then(res => {
        if(res.length > 0) this.statisticsInfo = res[0]
      })
    },
    analyzeData(list) {
      let joinPeople = [];
      var subtasklist = [];
      if(this.projectInfo.taskPrincipalId) joinPeople.push(this.projectInfo.taskPrincipalId);
      if(!joinPeople.includes(this.projectInfo.taskConfirmId) && this.projectInfo.taskConfirmId !== '') joinPeople.push(this.projectInfo.taskConfirmId)

      list.forEach((item, index) => {
        if(item.taskEndTime !== '') {
          let endTime = !item.taskRealEndtime ? this.getCurTime() : item.taskRealEndtime
          this.$set(this.taskList[index], 'analyzeData', this.daysDiff(endTime, item.taskEndTime));
        } else {
          this.$set(this.taskList[index], 'analyzeData', '');
        }
        if(item.taskDatatype === '2' && item.taskStatus === '1') {
          this.$set(this.taskList[index], 'subTaskInfo', [])
          this.$set(this.taskList[index], 'showCurSubTask', false)
        }
        if(item.taskDatatype === '3' && item.taskStatus === '1') subtasklist.push(item)

        if(!joinPeople.includes(item.taskPrincipalId) && item.taskPrincipalId !== '') joinPeople.push(item.taskPrincipalId)
        if(!joinPeople.includes(item.taskConfirmId) && item.taskConfirmId !== '') joinPeople.push(item.taskConfirmId)
      })
      subtasklist.forEach(item => {
        list.forEach((task, index) => {
          if(item.taskBelongId === task.id) return this.taskList[index].subTaskInfo.push(item)
        })
      })
      
      this.people = joinPeople.length;
    },
    // 获取当前日期
    getCurTime(){
      let d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth()+1;
      let date = d.getDate();
      let curTime = year+'-'+month+'-'+date;
      return curTime;
    },
    // 计算两个日期的时间差
    daysDiff(oDate1,oDate2){
      let  aDate, iDays;
      aDate = oDate1.split("-")  
      oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
      aDate = oDate2.split("-");
      oDate2 = new  Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
      iDays = parseInt((oDate2 - oDate1) / 1000 / 60 / 60 /24);

      return iDays;
    },
    updateProject(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.AddOrUpdateProject.init(id)
      })
    },
    openTaskDetail(id, taskDatatype) {
      this.taskDetailVisible = true;
      this.$nextTick(() => {
        this.$refs.TaskDetail.init(id, taskDatatype);
      })
    },
    async getTableData() {   
      let {list, totalPage} = await this.$httpN.postB('division/task/projectAttach', {
        limit: 999,
        id: this.projectInfo.id
      })
      this.collateTableData(list);
    },
    handleSizeChange(val) {
      this.limit = val;
    },
    collateTableData(list) {
      let arr = [];
      list.forEach(res => {
        if(res.taskAttachment !== '') {
          JSON.parse(res.taskAttachment).forEach(attachment => {
            arr.push({id: res.id,attachment: attachment})
          })
        }
      })
      this.tableData = arr;
    },
    getPic(filename) {
      if(filename) {
        if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438103037435905.png'
        }else if(/\.(txt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438530785140737.png'
        }else if(/\.(xls|xlsx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438725690253314.png'
        }else if(/\.(doc|docx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439195636850689.png'
        }else if(/\.(psd)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439984203751426.png'
        }else if(/\.(pdf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440139145535490.png'
        }else if(/\.(ppt|pptx|dps|dpt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440657859305473.png'
        }else if(/\.(rar|zip|arj|gz)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442063039193090.png'
        }else if(/\.(html|htm)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442135319633921.png'
        }else if(/\.(dwg|bak|dwt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276441741667459074.png'
        }else if(/\.(wav|aif|au|mp3|ram|wma|mmf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442006684524546.png'
        }else if(/\.(avi|mov|rmvb|rm|flv|mp4)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442233483124737.png'
        }else{
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
        }
      }else {
        return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
      }
    },
    loadTrends() {
      this.loading = true;
      this.page ++;
      this.searchData();
    },
    async searchData(init) {
      if(init) {
        this.page = 1;
        this.dateCollect = [];
        this.trendDataCollect = {};
        this.isFirstLoading = true;
      }
      let {list, totalPage} = await this.$httpN.postB('division/dynamic/list', {
        dynamicAscription: '1',
        projectIds: this.projectInfo.id,
        page: this.page
      })
      
      this.setDataToCollect(list);

      this.loading = false;
      if(init) {
        this.totalPage = totalPage;
        this.$nextTick(() => {
          this.isFirstLoading = false;
        })
      }
    },
    setDataToCollect(list) {
      if(list.length > 0) {
        list.forEach(item => {
          if(this.dateCollect.includes(item.dayGroup)) {
            if(this.trendDataCollect[item.dayGroup].projectIds.includes(item.projectId)){
              this.trendDataCollect[item.dayGroup][item.projectId].push(item);
            }else {
              this.trendDataCollect[item.dayGroup].projectIds.push(item.projectId);
              this.trendDataCollect[item.dayGroup].projectNames.push(item.projectName);
              this.trendDataCollect[item.dayGroup][item.projectId] = [item];
            }
          }else {
            this.dateCollect.push(item.dayGroup)
            this.$set(this.trendDataCollect, item.dayGroup, {
              projectIds: [item.projectId],
              projectNames: [item.projectName],
            })
            this.$set(this.trendDataCollect[item.dayGroup], item.projectId, [item])
          }
        })
      }
    },
    downloadFile: function (url, fileName) {//跨域文件路径、下载到本地的文件名
    if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(url)) return this.dingPreviewPic(url);
      if(!url) return;
      var x = new XMLHttpRequest();
      x.open("GET", url, true);
      x.responseType = 'blob';
      x.onload=function(e) {
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = fileName;
        a.click()
      }
      x.send();
    },
    initCharts (data) {
      var option = {
        title: {
          show: true,
          text: '任务分布',
          textStyle: {
            fontSize: 16,
          },
          left: 'center',
          bottom: 0
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          bottom: 10,
          data: ['待完成', '待确认', '已完成', '已终止']
        },
        color: ['#21D779','#4495FF', '#B0C7CD', '#DBDADA'],
        series: [{
            name: '任务分布',
            type: 'pie',
            radius: ['50%', '70%'],
            itemStyle : {
              normal : {
                label : {
                  show : false
                },
                labelLine : {
                  show : false
                }
              },
            },
            data: [
              {
                value: data.undoneAmount,
                name: '待完成',
                tooltip: {
                  trigger: 'item',
                  formatter: function (param) {
                    return [
                      '任务分布<br/>',
                      '待完成: ' + data.undoneAmount + '（' +param.percent + '%）' +'<hr size=1 style="margin: 3px 0">',
                      '逾期: ' + data.overdueAmount + '<br/>',
                    ].join('');
                  }
                }
              },{
                value: data.uncomfirmAmount,
                name: '待确认'
              },{
                value: data.completeAmount,
                name: '已完成',
                tooltip: {
                  formatter: function (param) {
                    return [
                      '任务分布<br/>',
                      '已完成: ' + data.completeAmount + '（' +param.percent + '%）' + '<hr size=1 style="margin: 3px 0">',
                      '提前完成: ' + data.aheadcompleteAmount + '<br/>',
                      '按时完成: ' + data.ontimecompleteAmount + '<br/>',
                      '逾期完成: ' + data.overduecompleteAmount + '<br/>'
                    ].join('');
                  }
                }
              },{
                value: data.terminatedAmount,
                name: '已终止'
              }
            ]
          }]
      }
      this.chartPie = echarts.init(document.getElementById('chart1'));
      this.chartPie.setOption(option);
　　},
    showSubTask (idx) {
      this.taskList[idx].showCurSubTask = !this.taskList[idx].showCurSubTask
    },
    toggle(type) {
      this.showPicture = type;
      if(this.showPicture && this.$refs.relationGraph) this.$refs.relationGraph.getGoalList();
    }
  },
  mounted() {
    this.documentClientHeight = document.documentElement["clientHeight"] - 54;
    window.onresize = () => {
      this.documentClientHeight = document.documentElement["clientHeight"] - 54;
      this.$emit("changeHeight")
      if(this.chartPie) this.chartPie.resize()
    };
  },
  activated() {
    if (this.chartPie) this.chartPie.resize()
  }
};
</script>

<style lang="scss" scoped>
.dialog-style {
  .header-title {
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    i {
      cursor: pointer;
      font-weight: bold;
    }
    .el-icon-back {
      color: #0099ff;
      float: left;
    }
  }
  .main {
    margin: -30px -20px;
    border-top: 1px solid #e1e1e1;
    display: flex;
    .left-bar {
      width: 250px;
      height: 100%;
      background: #fff;
      box-shadow: 3px 0 4px #f0f0f0;
      .create-btn{
        height: 92px;
        padding-top: 26px;
        >div{
          cursor: pointer;
          width: 200px;
          line-height: 40px;
          text-align: center;
          color: #FFF;
          background: #4983FF;
          box-shadow: 0 2px 4px #4983FF;
          margin: 0 auto;
          border-radius: 5px;
          font-size: 16px;
        }
        .forbid{
          background: #A4C4FF;
          box-shadow: 0 2px 4px #A4C4FF;
        }
        .forbid:hover{
          cursor: not-allowed;
        }
      }
      .menu-list{
        width: 250px;
        .menu-item {
          line-height: 50px;
          padding-left: 50px;
          color: #75797e;
          cursor: pointer;
          position: relative;
          &:hover {
            background: #f7f7f7;
          }
          .menu-icon {
            position: absolute;
            left: 20px;
            top: 15px;
            font-size: 20px;
            font-weight: normal;
          }
        }
        .menu-item.active {
          color: #4983ff;
          background: #ecf1fd;
          &::before {
            content: "";
            height: 100%;
            width: 5px;
            background: #4983ff;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
    }
    .content-wrapper {
      width: 100%;
      margin: 20px;
      position: relative;
      flex: 1;
      overflow-y: hidden;
      .status-color1{
        color:#21D779;
      }
      .status-color2{
        color:#4495FF;
      }
      .status-color3{
        color: #B0C7CD;
      }
      .status-color9{
        color: #DBDADA;
      }
      .early-color{
        color:#21D779 !important;
      }
      .overdue-color{
        color:#FF5050 !important;
      }
      .overdue-bg-color{
        background-color:#B0C7CD;
      }
      .early-bg-color{
        background-color:#21D779;
      }
      .ontime-bg-color{
        background-color:#4495FF;
      }
      .status-bg-color1 {
        background-color: #F0F9E8;
      }
      .status-bg-color2 {
        background-color: #D9ECFF;
      }
      .status-bg-color3 {
        background-color: #F4F4F5;
      }
      .status-bg-color9 {
        background-color: #EDEDED;
      }
      .content.first-content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        align-content: flex-start;
        .task-detail {
          position: relative;
          width: 23%;
          height: 100%;
          border-radius: 10px;
          padding: 0 20px;
          overflow-y: hidden;
          position: relative;
          &::-webkit-scrollbar {/*滚动条整体样式*/
            width: 0px;
            height: 0px;
          }
          >.top {
            width:calc(100% - 40px);
            position: absolute;
            z-index: 2;
            padding: 10px 0;
            .title {
              color: #606266;
              font-weight: bolder;
              text-align: center;
              font-size: 16px;
            }
          }
          .task-content {
            margin-top: 36px;
            overflow-x: hidden;
            overflow-y: auto;
            height: calc(100% - 38px);
            &::-webkit-scrollbar {/*滚动条整体样式*/
              width: 0px;
              height: 0px;
            }
            .task-item {
              background-color: #fff;
              width: 100%;
              margin: 0 auto 20px auto;
              border-radius: 5px;
              box-shadow: 0px 0px 1px rgb(221, 221, 221);
              padding: 10px 20px;
              margin-top: 15px;
              cursor: pointer;
              position: relative;
              &:hover {
                box-shadow: 0px 0px 4px rgb(221, 221, 221);
              }
              .top {
                display: flex;
                .logo{
                  width: 48px;
                  height: 48px;
                  text-align: center;
                  background: #409EFF;
                  border-radius: 4px;
                  i{
                    line-height: 48px;
                    font-size: 30px;
                    color: #FFF;
                  }
                }
                .task-info {
                  flex: 1;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  p {
                    margin: 0;
                    padding-left: 10px;
                  }
                  .taskName {
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                  .project {
                    margin-top: 15px;
                    width: 60%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    span {
                      background: #ffdcdc;
                      color: #ff5050;
                      padding: 2px 6px;
                      border-radius: 3px;
                    }
                  }
                }
              }
              .bottom {
                margin-top: 10px;
                p {
                  margin: 5px 0 0 0;
                  color: #79828c;
                  i {
                    margin-right: 4px;
                  }
                }
                .task-status {
                  position: absolute;
                  right: 10px;
                  bottom: 50px;
                  line-height: 30px;
                  width: 80px;
                  text-align: center;
                  color: white;
                  border-radius: 20px;
                }
                
              }
            }
            .sub-task-item {
              background-color: #DBDADA;
              margin-right: 0;
            }
          }
        }
      }
      .content {
        position: relative;
        height: 100%;
        overflow-x: auto;
        .table-file {
          .table-file-name {
            cursor: pointer;
            i {
              font-size: 20px;
              color: #4983ff;
              width: 60px;
              span {
                font-size: 14px;
                color: #606266;
              }
            }
            img {
              width: 30px;
              height: 30px;
              margin-right: 10px;
            }
          }
          .edit {
            cursor: pointer;
            &:hover {
              color: #4983ff;
            }
          }
        }
        .project-data {
          height: 100%;
          .nav {
            display: flex;
            margin-bottom: 20px;
            flex-wrap: wrap;
            justify-content:space-between;
            align-content: flex-start;
            .nav-item {
              width: 100px;
              text-align: center;
              .top {
                line-height: 36px;
                font-size: 20px;
                font-weight: bold;
              }
              img {
                width: 54px;
                height: 54px;
                border-radius: 50%;
                border: 1px solid #f1f5ff;
              }
            }
            .line {
              margin-left: 6px;
              border-left: 1px solid #e1e1e1;
              font-size: 0;
              padding: 27px 0;
            }
          }
          .title{
            font-size: 18px;
            font-weight: bold;
            background-color :#fff;
            padding: 0 10px;
            border-left: 5px solid #4983ff;
          }
          .project-data-content {
            height: calc(100% - 74px);
            border-top: 1px solid #e1e1e1;
            display: flex;
            .left {
              flex: 1;
              padding: 20px;
              overflow-y: auto;
              &::-webkit-scrollbar {/*滚动条整体样式*/
                width: 0px;
                height: 0px;
              }
              .statistics-charts {
                width: 100%;
                #chart1 {
                  margin: 0 auto;
                }
              }
            }
            .right {
              border-left: 1px solid #e1e1e1;
              width: 500px;
              padding: 20px 0;
            }
          }
          .project-data-wrapper{
            padding-left: 20px;
            .project-content{
              height: 100%;
              z-index: 2;
              overflow-y: auto;
              &::-webkit-scrollbar {/*滚动条整体样式*/
                width: 0px;
                height: 0px;
              }
              .date{
                font-size: 16px;
                margin: 20px 0;
              }
              .project-wrapper{
                padding-top: 20px;
                background: white;
                box-shadow: 0px 0px 4px rgb(221, 221, 221);
                border-radius: 3px;
                .project-header{
                  width: 180px;
                  line-height: 32px;
                  border-radius: 100px;
                  background: #ECECEC;
                  color: #75797E;
                  text-align: center;
                  margin-left: 55px;
                  position: relative;
                }
                .project-trend-wrapper{
                  .project-trend{
                    display: flex;
                    .avatar{
                      margin-left: 20px;
                      margin-right: 15px;
                      position: relative;
                      img{
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        position: absolute;
                        z-index: 2;
                      }
                      &::after{
                        content: '';
                        height: 100%;
                        position: absolute;
                        top:0;
                        left: 19.5px;
                        z-index: 1;
                        border-width: 1px;
                        border-style: dashed;
                        border-color: #ECECEC;
                        border-right-width: 0px;
                      }
                    }
                    &:last-child{
                      .avatar::after{
                        content: none;
                      }
                    }
                    &:first-child{
                      .avatar::before{
                        content: '';
                        height: 30px;
                        position: absolute;
                        top:-30px;
                        left: 19.5px;
                        z-index: 1;
                        border-width: 1px;
                        border-style: dashed;
                        border-color: #ECECEC;
                        border-right-width: 0px;
                      }
                    }
                    .time{
                      margin-top: 10px;
                      color: #B8BFCB;
                    }
                    .trend-detail{
                      flex: 1;
                      margin-left: 40px;
                      padding-top: 5px;
                      padding-bottom: 40px;
                      p{
                        margin: 0;
                      }
                      .row-1{
                        span{
                          margin-left: 15px;
                          color:#606266;
                        }
                      }
                      .row-2{
                        margin: 10px 0;
                        font-size: 13px;
                        display: inline-block;
                        color: #C0C4CC;
                        cursor: pointer;
                        &:hover{
                          color: #409EFF;
                        }
                      }
                      .row-3{
                        color: #909399;
                        white-space: pre-line;
                      }
                    }
                  }
                  .project-trend:first-child{
                    margin-top: 30px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1600px) {
  .dialog-style .main .content-wrapper .first-content {
    min-width: 1300px;
  }
  .dialog-style .main .content-wrapper .content .task-detail {
    min-width: 250px;
  }
  .dialog-style .main .content-wrapper .content .task-detail .task-content .task-item .bottom .task-status {
    display: none;
  }
  .dialog-style .main .content-wrapper .content .project-data .unimportance-info {
    display: none;
  }
  .dialog-style .main .content-wrapper .content .project-data .project-data-content .right {
    width: 400px;
  }
}

@media screen and (max-width: 1300px) {
  .dialog-style .main .content-wrapper .third-content {
    min-width: 800px;
  }
  .dialog-style .main .content-wrapper .content .project-data .unimportance-info {
    display: none;
  }
  .dialog-style .main .content-wrapper .content .project-data .nav .nav-item {
    width: 80px;
  }
  .dialog-style .main .content-wrapper .content .project-data .project-data-content .right {
    width: 300px;
  }
}
</style>